<script setup lang="ts">
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
definePageMeta({
    layout: 'login',
    title: '登录',
    name: 'login',
    i18n: 'menu.login',
})
const router = useRouter();
const username = ref('');
const password = ref('');
const remember = ref(false);
const showPassword = ref(false); // 控制密码是否可见
const onSubmit = (values: any) => {
    let form = { ...values, remember: remember.value }
    console.log('submit', form);
};
const goRegister = () => {
    router.push('/register')
}
</script>

<template>
    <div mx-auto mb-60 pt-15 text-center text-16 text-dark dark:text-white>
        <img src="/img/logo.png" alt="logo" class="w-60  mx-auto mt-26" />
        <div class="color-#9abfff text-12 mt-10">Noblebet.site</div>
        <van-form @submit="onSubmit" class="mt-30">
            <van-cell-group inset>
                <van-field v-model="username" name="username" :placeholder="t('login_page.username')" :border="false"
                    :rules="[{ required: true, message: t('login_page.username') }]">
                    <template #left-icon>
                        <img src="/img/username.png" alt="" class="w-20 mr-10">
                    </template>
                </van-field>
                <van-field v-model="password" :type="showPassword ? 'text' : 'password'" :border="false"
                    :right-icon="showPassword ? 'eye-o' : 'closed-eye'" @click-right-icon="showPassword = !showPassword"
                    name="password" :placeholder="t('login_page.password')"
                    :rules="[{ required: true, message: t('login_page.password') }]">
                    <template #left-icon>
                        <img src="/img/lock.png" alt="" class="w-20 mr-10">
                    </template>
                </van-field>
                <div class="checkbox flex mt-10 mb-5">
                    <van-checkbox v-model="remember" shape="square" :border="false" checked-color="#007AFF"
                        class="custom-checkbox">
                        <template #icon="props">
                            <div
                                class="box w-24 h-24 rounded-5 flex justify-center items-center bg-[#007AFF] border-none">
                                <img :src="props.checked ? '/img/remember.png' : '/img/remeber_en.png'" alt=""
                                    class="w-17 h-12 transition-opacity duration-200" />
                            </div>
                        </template>
                    </van-checkbox>
                    <span class="ml-5 color-#ffffff leading-36">{{ t('login_page.remember') }}</span>
                </div>
            </van-cell-group>
            <div>
                <van-button class="login" native-type="submit"> {{ t('login_page.submit') }}</van-button>
            </div>
            <div class="mt-20">
                <span class="color-#aab2bb"> {{ t('login_page.noCount') }}</span>
                <span class="text-primary underline" @click="goRegister"> {{ t('login_page.goRegister') }}</span>
            </div>
        </van-form>
    </div>
</template>
<style scoped lang="css">
::v-deep .van-cell {
    background: #3e4d6e;
    color: #aab2bb;
    margin: 10px 0;
    padding: 12px 16px;
    border-radius: 10px;
    border: 2px solid rgba(159, 168, 188, 0.3);
    display: flex;
    align-items: center;
}

.box {
    border: 2px solid rgba(159, 168, 188, 0.3);
    background: #3e4d6e;
}

::v-deep .van-cell-group--inset {
    background: transparent;
}

/* ::v-deep .checkbox .van-icon:before {
  color: var(--c-primary);
}
::v-deep .checkbox .van-checkbox__icon--checked .van-icon{
    color:#ffffff !important;
} */
::v-deep .van-checkbox__icon .van-icon {
    border: 2px solid rgba(159, 168, 188, 0.3);
    background: #3e4d6e;
    border-radius: 5px;
    /* border: none; */
}

::v-deep .van-field__control {
    color: #ffffff;
}

::v-deep .van-button--default {
    border: none;
}

.login {
    width: 100%;
    height: 49px;
    background: url('/img/login_btn.png');
    background-size: 100% 100%;
    color: #bfecff;
    line-height: 49px;
}

::v-deep .van-checkbox__icon[aria-checked="true"] {
    color: #007AFF;
    /* 蓝色 */
    /* border-radius: 5px; */
}

::v-deep .van-checkbox__icon[aria-checked="false"] {
    color: transparent;
}

.van-checkbox {
    margin-bottom: 9px;
}

.custom-checkbox {
    margin: 0;
    padding: 0;
}

.box {
    background: #3e4d6e;
    border: 2px solid rgba(159, 168, 188, 0.3);
    transition: all 0.2s ease;
}
</style>
